<template>
  <div class="body">
    <!--这里是头部开始-->
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <div class="header">
      <img class="img2" src="./img/reflash.gif"  alt="">
      <span class="span">本地支付环境安全，请放心使用.</span>
    </div>
    <!--这里是头部结束-->
    <!--这里是内容区域开始-->
    <div class="content">
      <div class="img3">
        <img src="./img/baojia.png" class="img3-img"  alt="">
      </div>
      <div class="content-c">
        <div class="shuru">
          <div class="ms-login">
            <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
              <el-form-item label="输入账号: " prop="pass">
                <el-input type="text" v-model="ruleForm2.pass" placeholder="输入账号"></el-input>
              </el-form-item>
              <el-form-item label="确认账号: " prop="checkPass">
                <el-input type="text" v-model="ruleForm2.checkPass" placeholder="确认账号"></el-input>
              </el-form-item>
              <el-form-item label="全    额: " prop="money">
                <el-input  placeholder="请输入支付全额" v-model.number="ruleForm2.money"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="payway">
          <div class="ms-login2">
            <div class="zhifu">
              <p class="span-text" style="padding-left:10px!important;">支付方式</p>
            </div>
            <div class="zhifu-way" >
              <div class="zhifu-item jjj animated slideInLeft" data-wow-duration="6s" @click="click1">
                <el-radio v-model="radio7" label="1" ><img src="./img/1.png"
                                                           :class="{ border1: isActive1 }"
                                                           class="img img-ji"  alt="">
                </el-radio>
              </div>
              <div class="zhifu-item bbb animated slideInLeft" @click="click2">
                <el-radio v-model="radio7" label="2"> <img src="./img/2.png"
                                                           :class="{ border1: isActive2 }"
                                                           class="img img-ou"  alt="">
                </el-radio>
              </div>
              <div class="zhifu-item jjj animated slideInLeft" @click="click3">
                <el-radio v-model="radio7" label="3"> <img src="./img/3.png"
                                                           :class="{ border1: isActive3 }"
                                                           class="img img-ji" alt="">
                </el-radio>
              </div>
              <div class="zhifu-item bbb animated slideInLeft"  @click="click4">
                <el-radio v-model="radio7" label="4"><img src="./img/4.png"
                                                          :class="{ border1: isActive4 }"
                                                          class="img img-ou" alt="">
                </el-radio>
              </div>
              <div class="zhifu-item jjj animated slideInLeft" @click="click5">
                <el-radio v-model="radio7" label="5"><img src="./img/5.png"
                                                          :class="{ border1: isActive5 }"
                                                          class="img img-ji"  alt="">
                </el-radio>
              </div>
              <div class="zhifu-item bbb animated slideInLeft" @click="click6">
                <el-radio  v-model="radio7" label="6"><img src="./img/6.png"
                                                           :class="{ border1: isActive6 }"
                                                           class="img img-ou"  alt="">
                </el-radio>
              </div>
              <div  class="zhifu-item jjj animated slideInLeft" @click="click7">
                <el-radio  v-model="radio7" label="7"><img src="./img/7.png"
                                                           :class="{ border1: isActive7 }"
                                                           class="img img-ji"  alt="">
                </el-radio>
              </div>
            </div>
          </div>
        </div>
        <div class="text">
          <p class="btn"><span style="margin-left:6px!important;">提交并完成支付</span></p>
        </div>
      </div>
    </div>
    <!--内容区域结束-->
    <!--底部开始-->
    <div class="footer">
    </div>
    <!--底部结束-->
  </div>
</template>

<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('全额不能为空'));
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        };
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请确认账号'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次账号不一致!'));
        } else {
          callback();
        }
      };
      var validateConfrim = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入验证码'));
        }
      };
      return {
        ruleForm2: {
          pass: '',
          checkPass: '',
          money: '',
        },
        radio7: '1',
        text1:'',
        isActive1:false,
        isActive2:false,
        isActive3:false,
        isActive4:false,
        isActive5:false,
        isActive6:false,
        isActive7:false,
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          money: [
            { validator: checkAge, trigger: 'blur' }
          ],
          confirm:[
            { validator: validateConfrim , trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      click1(){
        this.isActive1=true
        this.isActive2=false
        this.isActive3=false
        this.isActive4=false
        this.isActive5=false
        this.isActive6=false
        this.isActive7=false

      },
      click2(){
        this.isActive1=false
        this.isActive2=true
        this.isActive3=false
        this.isActive4=false
        this.isActive5=false
        this.isActive6=false
        this.isActive7=false

      },
      click3(){
        this.isActive1=false
        this.isActive2=false
        this.isActive3=true
        this.isActive4=false
        this.isActive5=false
        this.isActive6=false
        this.isActive7=false

      },
      click4(){
        this.isActive1=false
        this.isActive2=false
        this.isActive3=false
        this.isActive4=true
        this.isActive5=false
        this.isActive6=false
        this.isActive7=false

      },
      click5(){
        this.isActive1=false
        this.isActive2=false
        this.isActive3=false
        this.isActive4=false
        this.isActive5=true
        this.isActive6=false
        this.isActive7=false

      },
      click6(){
        this.isActive1=false
        this.isActive2=false
        this.isActive3=false
        this.isActive4=false
        this.isActive5=false
        this.isActive6=true
        this.isActive7=false

      },
      click7(){
        this.isActive1=false
        this.isActive2=false
        this.isActive3=false
        this.isActive4=false
        this.isActive5=false
        this.isActive6=false
        this.isActive7=true

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
  .body{
    width: 100%;height: 100%;margin: 0px;padding:0px;
  }
  .header{
    width: 100%;height:40px;line-height:40px;color: #fff;
    top: 0px;left: 0px;font-size: 12px;background-color: rgba(0, 0, 0, 0.51);
  }
  .content{
    width:70%;height:520px;margin:20px auto;border: 1px solid grey;box-shadow:0px 0px 10px 5px grey;
  }
  .content-c{
    width:100%;height:480px;margin:0px auto;margin-top:25px!important;
  }
  .shuru{
    width:95%;height: 220px;margin:10px auto;
  }
  .payway{
    width:95%;height: 220px;margin:10px auto;
  }
  .span-text{
    width: 100%;height: 45px;margin-top:8px;
  }
  .img{
    width: 100px;height:30px;position: absolute;top:-6px;
  }
  .border1{
    border: 1px solid #838383;
  }
  .ms-login2{
    width:40%;height: 80%;margin:0 auto;margin-top: -40px !important;
    display: flex;display: -webkit-flex;flex-direction: row;
  }
  .zhifu{
    width: 20%;height: 100%;color: #666666;
  }
  .zhifu-way{
    width:80%;height: 100%;display: flex;display: -webkit-flex;flex-wrap: wrap;
  }
  .zhifu-item{
    width:45%;display: flex;display: -webkit-flex;flex-direction: row;justify-content: right;align-items: center;
    margin-left:5%;
  }
  .text{
    width:60%;height:140px;margin:20px auto;text-align: center;font-size: 18px;margin-top: -50px!important;
  }
  .footer{
    width: 100%;height:350px;
    background-image: url("img/12345.png");
    background-size: 100% 350px;
  }
  .span{
    width:20%;right:10%;position: absolute;color: #fff;
  }
  .ms-login {
    width:40%;margin:0 auto;height: 80%;
  }
  .img2{
    width:40px;height:30px;right:25.9%;position: absolute;top:5px;
  }
  .img3{
    width:100%;height:40px;margin: 0 auto;text-align: center;margin-top: 10px!important;
  }
  .img3-img{
    width:450px;height:40px;margin: 0 auto;margin-left:100px!important;
  }
  .btn{
    width:30%;height: 35px;line-height: 35px;border-radius:5px;outline: none;
    font-size:16px;color: #fff;
    background-color:#03a1e7;margin: 0 auto;
    margin-top:30px!important;margin-left:35%!important;
  }
  /*=================================这里是媒体屏幕适配查询开始===========================================================*/
  @media screen and (max-width:500px) {
    .ms-login {
      width:80%;margin:0  auto;height: 80%;;
    }
    .content{
      width:90%;height:520px;margin:20px auto;
    }
    .span-text{
      width: 100%;height: 45px;margin-top:8px;margin-left:-15px !important;
    }
    .span{
      right:5%;width: 46%;
    }
    .ms-login2{
      width:100%;margin:-10px  auto;height: 80%;margin-top: -40px !important;
    }
    .zhifu{
      width:30%;height: 100%;color: #666666;
    }
    .zhifu-way{
      width:70%;height: 100%;display: flex;display: -webkit-flex;flex-wrap: wrap;margin-left: -20px !important;
    }
    .zhifu-item{
      margin-left:3.5%;
    }
    .jjj{
      margin-left:1.5% !important;
    }
    .bbb{
      margin-left:8.2% !important;
    }
    .img{
      margin-left: -1%;
    }
    .img-ji{
      margin-left: -3.5% !important;
    }
    .img-ou{
      margin-left:0% !important;
    }
    .img2{
      width:40px;height:30px;right:47.4%;position: absolute;
    }
    .text{
      width:70%;height: 40px;margin:20px auto;text-align: center;font-size: 18px;
      font-family:"Georgia  serif";
    }
    .img3{
      width:450px;height:40px;margin-top:0px;margin-left: -47px;
    }
    .img3-img{
      width:350px;height:40px
    }
    .btn{
      width:200px;height: 35px;line-height: 35px;border-radius: 10px;outline: none;
      background-color:#03a1e7;margin: 0 auto;margin-top:25px!important;margin-left:60px!important;
    }
    .footer{
      width: 100%;height:150px;
      background-image: url("img/12345.png");
      background-size: 100% 150px;
    }
  }
  @media screen and (width:320px){
    .text{
      width:40%;height:140px;margin:20px auto;text-align: center;font-size: 18px;margin-top: -50px!important;
      margin-left:20px !important;
    }
    .img3{
      width:20%;height:40px;margin: 0 auto;text-align: center;margin-top: 10px!important;
      margin-left: -60px !important;
    }
    .img2{
      width:40px;height:30px;right:180px;position: absolute;top:5px;
    }
    .content{
      width:110%;height:520px;margin:20px auto;box-shadow:0px 0px 10px 5px grey;
    }
    .footer{
      width: 120%;height:120px;
      background-image: url("img/12345.png");
      background-size: 120% 120px;
    }
    .header{
      width: 120%;height:40px;line-height:40px;color: #fff;
      top: 0px;left: 0px;font-size: 12px;background-color: rgba(0, 0, 0, 0.51);
    }
    .ms-login {
      width:300px !important;margin:0 auto;height: 80%;
    }
    .span{
      right:0%;width:60%;
    }
  }
  @media(width: 360px){
    .header{
      width: 100%;height:40px;line-height:40px;color: #fff;
      top: 0px;left: 0px;font-size: 12px;background-color: rgba(0, 0, 0, 0.51);
    }
    .footer{
      width: 100%;height:120px;
      background-image: url("img/12345.png");
      background-size:100% 100%;
    }
    .content{
      width:100%;height:520px;margin:20px auto;box-shadow: none!important;border: 0px!important;
    }
    .ms-login {
      width:340px !important;margin:0 auto;height: 80%;
    }
  }
  @media (min-width:758px) and (max-width:1034px){
    .zhifu-way{
      width:100%;height: 100%;display: flex;display: -webkit-flex;flex-wrap: wrap;margin-left: 10%!important;
    }
    .bbb{
      margin-left:150px !important;margin-top: -24%!important;
    }
    .content{
      width:100%;height:520px;margin:20px auto;border:0px;
    }
    .ms-login {
      width:400px !important;margin:0 auto;height: 80%;
    }
  }
  /*==================================媒体查询结束==============================================*/
</style>
